<!DOCTYPE html>
<!-- 
利用flex布局实现一个垂直居中效果。
绿色元素水平垂直居中
调节浏览器宽度和宽度，灰色元素始终水平居中 -->

<html>
    <head>
        <style>
            .father {
                width: 200px;
                height: 200px;
                background-color: gray;
                margin: auto;
                display: flex;
                /* 可以在子元素中使用margin:auto代替 */
                justify-content: center;
                align-items: center;
            }

            .child {
                width: 100px;
                height: 100px;

                background-color: green;
            }
        </style>
    </head>

    <body>
        <div class="father">
            <div class="child"></div>
        </div>
    </body>
</html>
